<template>
  <container title="商品采集列表">
    <div class="main-card" v-loading="loading">
      <tbc-pagination :total="total" :config="{page, size}" simple @change="loadDataList">
        <template v-slot:left>
          <el-input placeholder="商品名称" class="short" v-model="filter.keyword" clearable size="small"
                    style="margin-right:10px;width:200px;">
            <template #prefix>
              <i class="el-input__icon el-icon-search"></i>
            </template>
          </el-input>
          <el-button
              icon="el-icon-search" type="primary" size="small"
              @click="loadDataList(1)">查询
          </el-button>
        </template>
        <template v-slot:right>
          <el-button size="small" icon="el-icon-plus" circle
                     @click="$refs.dialog.show()"></el-button>
          <el-button size="small" icon="el-icon-refresh" circle @click="loadDataList(page)"></el-button>
        </template>
      </tbc-pagination>
      <div class="data-container">
        <tbc-dynamic-table
            ref="table"
            v-loading="loading"
            :data="dataList"
            :cols="[
            {label: '商品', prop: 'base', minWidth: 400},
            {label: '采集时间', prop: 'create_time', width: 200},
            {label: '操作', width: 100, type: 'action', fixed: 'right',
            click: onButtonClick, button: [
                {label: '删除', type: 'text', code: 'delete'},
                {label: '入库', type: 'text', code: 'add'},
        ]}]">
          <template v-slot:base="scope">
            <div style="float:left;width:70px;height:70px;">
              <el-image :src="scope.row.cover"></el-image>
            </div>
            <div style="padding:0 50px 0 86px;min-width: 400px;">
              <p>{{ scope.row.gather_id }}</p>
              <p>{{ scope.row.url }}</p>
              <p class="">
                <span class="">{{ scope.row.title }}</span>
              </p>
            </div>
          </template>
        </tbc-dynamic-table>
      </div>
      <tbc-pagination :total="total" :config="{page, size}" @change="loadDataList"/>
    </div>
  </container>
  <tbc-dialog ref="dialog" title="京东商品采集" @confirm="startCrawl">
    <tbc-dynamic-form :form="dynamicForm" class="compact"/>
  </tbc-dialog>
  <type-selector ref="typeComponent"/>
</template>
<script lang="ts">
import {
  defineComponent, toRefs, onMounted, ref, reactive,
  defineAsyncComponent, Ref
} from 'vue'
import http from '@/plugin/http'
import {ElMessage} from 'element-plus'
import {useRouter} from 'vue-router'

export default defineComponent({

  name: 'goods-gather',

  components: {
    TypeSelector: defineAsyncComponent(() =>
        import('./components/GoodsFormTypeSelector.vue')),
  },

  setup() {
    const router = useRouter()
    const dialog = ref(null)
    const typeComponent: Ref = ref(null)
    const state = reactive({
      loading: false,
      total: 0, page: 1, size: 10,
      keyword: '', dataList: [],
      filter: {keyword: ''},
      dynamicForm: [
        {label: '链接地址', type: 'input', field: 'url', value: ''},
      ]
    })

    const onButtonClick = (data: { gather_id: string }, action: string) => {
      if (action === 'add') {
        typeComponent.value.show({gather_id: data.gather_id})
        // router.push({name: 'goods-add', query: })
      }
    }

    // 请求数据
    const loadDataList = async (page?: number, size?: number): Promise<void> => {
      state.loading = true
      if (page) state.page = page
      if (size) state.size = size
      const res = await http.get('/goods.gather', {
        page,
        size,
        ...state.filter
      })
      state.loading = false
      if (res.data.code !== 0) {
        ElMessage.error(res.data.message);
      } else {
        const data = res.data.data
        state.total = data.total;
        state.dataList = data.list;
      }
    }

    const startCrawl = async () => {
      let form = {url: ''}
      state.dynamicForm.forEach(item => form[item.field] = item.value)
      if (!form.url) return ElMessage.error('请输入地址');
      const res = await http.post('/goods.gather/start', form)
      if (res.data.code !== 0) return ElMessage.error(res.data.message);
      ElMessage.success(res.data.message);
    }

    onMounted(() => {
      loadDataList(1)
    })

    return {
      ...toRefs(state),
      typeComponent,
      loadDataList,
      startCrawl,
      onButtonClick
    }
  }
})
</script>